<template>
	<view class="container">
		<!-- <u-navbar title="占位费详情说明"></u-navbar> -->
		<view class="box" v-if="ChargeCarSys">

			<view class="title u-flex u-row-center z-type-cdz">
				{{ $z.$t("占位费详情说明") }}
			</view>
			<view class="item1">
				{{$z.$t("1、此车位为新能源汽车充电车位，在车辆充电期间将不收取占位费，只收取充电费用。")}}
			</view>
			<view class="item1">
				2、{{ $z.$t("请将车辆停到车位锁上方。") }}
			</view>
			<view class="item1">
				3、{{tipThree}}
			</view>
			<view class="item1">
				4、{{ $z.$t("为车辆充电时需要先插好充电枪再点击充电按钮。") }}
			</view>
			<view class="item1">
				5、{{ tipFive }}
			</view>
			<view class="item1">
				6、{{ tipSix}}
			</view>
			<view class="item1">
				7、{{$z.$t("充电结束您将收到公众号充电结束提醒，请及时挪车，避免额外支付占位费。")}}
			</view>
			<view class="item1">
				8、{{ $z.$t("同一个用户同一时间段之内只能启动一笔地锁订单。")}}
			</view>
			<view class="title">
				温馨提示
			</view>
			<view class="item1">
				{{$z.$t("若不充电或已完成充电，请手机上操作车位锁完全上升后离开，否则其它车辆进入后将会扣取您的占位费。")}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ChargeCarSys: {}
			}
		},
		asyncComputed: {
			tipThree() {
				let res = this.$z.$t("请在停入后的{1}分钟之内启动充电，否则将直接开始占位费计算。")
				res = res.replace(/\{1\}/g, 10);
				return res;
			},
			tipFive() {
				let res = this.$z.$t("免费停放时间=车辆充电时长+{1}分钟，超过{2}分钟则需支付占位费{3}元/{4}分钟。")
				res = res.replace(/\{1\}/g, this.ChargeCarSys.jebd);
				res = res.replace(/\{2\}/g, this.ChargeCarSys.jebd);
				res = res.replace(/\{3\}/g, this.ChargeCarSys.qbf / 100);
				res = res.replace(/\{4\}/g, this.ChargeCarSys.dfsj);
				return res;
			},
			tipSix() {
				let res = this.$z.$t("地锁在无遮挡物的情况下{1}秒后自动升起，也可以在无遮挡物的情况下手动点击相应按钮可立刻升起。")
				res = res.replace(/\{1\}/g, '120');
				return res;
			},
		},
		async onLoad(query) {
			this.obj = query
			await this.searchDeviceStop(this.obj.gtel)
		},
		methods: {
			async searchDeviceStop(val) {
				let ChargeCarSys = await this.$z.request("/ChargeCarSys", {
					gtel: this.obj.gtel,
				});
				this.ChargeCarSys = ChargeCarSys[0]

			},
		}
	}
</script>

<style>
	.container {
		background-color: #F5F5F5;
		width: 100%;
		height: 100vh;
		padding: 40rpx 34rpx 0 34rpx;
	}

	.title {
		margin-bottom: 20rpx;
		color: #2093F5;
		font-weight: 500;
	}

	.box {
		/* background-color: white; */
	}

	.item1 {
		padding: 0 0rpx 20rpx 0rpx;
		font-size: 24rpx;
		color: $uni-text-color-grey;
		line-height: 1.6;
	}
</style>